<template>
  <view>
        <view style="padding: 0px 0px;">
            <view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index">
                <view v-if="item.isSort">
                    <view class="filter-content-list">
                        <view v-for="(detailItem,idx) in selectDetailList" :key="idx"
                              :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'"
                              :style="{'color': detailItem.isSelected?themeColor:'#666666'}"
                              @tap="sortTap(idx,selectDetailList,item.key)">
                            <text>{{ detailItem.title}}</text>
                        </view>
                    </view>
                </view>
                <view v-if="item.isArea">
                    <!-- 城市列表 -->
                    <view style="display: flex">
                        <view>
                            <scroll-view   :scroll-into-view="currentView" class="city-list" scroll-y>
                                <view   class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
                                    <view>{{ item.detailTitle }}</view>
                                </view>
                                <view  class="filter-content-detail-area">
                                    <view :id="'item-' + idx" v-for="(detailItem,idx) in selectDetailList" :key="idx"
                                          class='filter-content-detail-item-default-area'
                                          :style="{'background-color':detailItem.isSelected?'#FFFFFF':'#f6f6f6','color':detailItem.isSelected?'#000':'#666666'}"
                                          @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)">
                                        {{ detailItem.title }}
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                        <view>
                            <scroll-view class="city-list" scroll-y>
                                <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
                                    <view>{{ item.detailTitle }}</view>
                                </view>
                                <view class="filter-content-detail-area">
                                    <view v-for="(detailItem,idx) in cityList" :key="idx"
                                          class='filter-content-detail-item-default-area-1'
                                          :style="{'font-weight':cityListSelected == idx?'bold':'none','color':cityListSelected == idx?'#000':'#666'}"
                                          @tap="itemTapcityList(idx,detailItem,item.isMutiple,item.key)">
                                        {{ detailItem.name }}
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </view>


                    <view class="filter-content-footer">
                        <view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;"
                              @tap="resetClick(selectDetailList,item.key)">
                            <text>重置</text>
                        </view>
                        <view class="filter-content-footer-item"
                              :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick">
                            <text>确定</text>
                        </view>
                    </view>
                </view>
                <view v-if="!item.isSort && !item.isArea">
                    <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
                        <text>{{ item.detailTitle }}</text>
                    </view>
                    
                    <!-- 字母导航区域 -->
                    <view v-if="item.showLetterNav" class="letter-nav-container">
                        <view class="letter-nav-title">
                            <text>按首字母筛选</text>
                        </view>
                        <view class="letter-nav-grid">
                            <text v-for="letter in letterList" :key="letter"
                                  class="letter-nav-item"
                                  :class="{'letter-nav-active': currentLetter === letter}"
                                  @tap="onLetterClick(letter)">
                                {{ letter }}
                            </text>
                        </view>
                    </view>
                    
                    <view class="filter-content-detail">
                        <text v-for="(detailItem,idx) in selectDetailList" :key="idx"
                              class='filter-content-detail-item-default'
                              :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}"
                              @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)">
                            {{ detailItem.title }}
                        </text>
                    </view>
                    <view class="filter-content-footer">
                        <view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;"
                              @tap="resetClick(selectDetailList,item.key)">
                            <text>重置</text>
                        </view>
                        <view class="filter-content-footer-item"
                              :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick">
                            <text>确定</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
  </view>
</template>

<script>
export default {
    data() {
        return {
            selectArr: [],
            result: {},
            menuIndex: 0,
            selectDetailList: [],
            independenceObj: {},
            selectedKey: '',
            cacheSelectedObj: {},
            defaultSelectedTitleObj: {},
            cityList: [],
            cityListSelected: 0,
            currentView: '', // 垂直滚动定位的id
            
            // 字母导航相关
            letterList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
            currentLetter: '', // 当前选中的字母
        };
    },
    props: {
        themeColor: {
            type: String,
            default() {
                return '#D1372C'
            }
        },
        menuList: {
            type: Array,
            default() {
                return []
            }
        },
        independence: {
            type: Boolean,
            default: false
        }
    },
    computed: {
      selectedTitleObj() {
            let obj = {}
            for (let i = 0; i < this.menuList.length; i++) {
                let item = this.menuList[i];
                obj[item.key] = item.title;
            }
            return obj;
        },
        defaultSelectedObj() { // 保存初始状态
            return this.getSelectedObj()
        },
        selectedObj: {
            get() {
                return this.getSelectedObj()
            },
            set(newObj) {
                return newObj;
            }

        }
    },
    methods: {
        // 字母点击事件
        onLetterClick(letter) {
            this.currentLetter = letter
            
            // 显示点击反馈
            uni.showToast({
                title: `选中字母 ${letter}`,
                icon: 'none',
                duration: 800
            })
            
            // 向父组件发送字母点击事件，但不关闭弹窗
            this.$emit('letterClick', letter)
            
            // 不再发送确认事件来关闭弹窗
            // 直接返回，保持弹窗打开状态
            return;
        },
        
        scrollToItem(index) {
            this.currentView = 'item-' + index
        },
        get_cityList(provinceId,index) {
			console.log("==provinceId=>",provinceId)
            return new Promise((suc, err) => {
                this.cityList=[]
                // system/comments/list?pageNum=1&pageSize=10&treeId={treeId}
                this.$http.to_http('system/provinceCity/cityList', {
                    provinceId: provinceId
                }, 'GET', false).then(res => {
                    res = res.data
                    if (res.code != 200) {
                        return uni.showToast({
                            title: res.msg,
                            icon: "none"
                        })
                    }
                    this.scrollToItem(index)
                    this.cityList = res.data
                    suc(res.data);
                }).catch(async err => {
                    // if (err.statusCode = 401) {
                    // 	let res = await this.get_comment()()
                    // 	suc(res);
                    // }
                })
            })
        },
        getSelectedObj() {
            let obj = {}
            for (let i = 0; i < this.menuList.length; i++) {
                let item = this.menuList[i];
                if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值

                    if (item.isMutiple) {
                        obj[item.key] = [];
                        item.detailList[0].isSelected = false;
                        if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组
                            item.defaultSelectedIndex = [item.defaultSelectedIndex];
                        }
                        for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj
                            item.detailList[item.defaultSelectedIndex[j]].isSelected = true;
                            obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value)
                        }

                    } else {
						if(item.detailList!=null&&item.detailList.length>0){
							obj[item.key] = item.detailList[item.defaultSelectedIndex].value;
							this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
							this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
							item.detailList[0].isSelected = false;
							item.detailList[item.defaultSelectedIndex].isSelected = true;
						}
                        
                    }
                } else {
                    if (item.isMutiple) {
                        obj[item.key] = [];
                    } else {
                        obj[item.key] = '';
                    }
                }
            }
            this.result = obj;
            return obj;
        },
        // 重置所有选项，包括默认选项，并更新result
        resetAllSelect(callback) {
            let titles = [];
            for (let i = 0; i < this.menuList.length; i++) {
                this.resetSelected(this.menuList[i].detailList, this.menuList[i].key);
                titles[this.menuList[i].key] = this.menuList[i].title;
            }
            let obj = {
                'result': this.result,
                'titles': titles,
                'isReset': true
            }
            this.$emit("confirm", obj);
            callback(this.result);
        },
        // 重置选项为设置的默认值，并更新result
        resetSelectToDefault(callback) {
            for (let i = 0; i < this.menuList.length; i++) {
                this.selectDetailList = this.menuList[i].detailList;

                if (this.menuList[i].defaultSelectedIndex) {
                    if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true
                        for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) {
                            if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) {
                                this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this
                                    .menuList[i].key)
                            }
                        }
                    } else {
                        this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[
                            i].key)
                    }

                    // 获取非默认项的下标
                    let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i])
                    // 把所有不是默认的为true的点为false
                    for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) {
                        if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) {
                            this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this
                                .menuList[i].key)
                        }
                    }
                }


            }

            this.selectedObj = this.defaultSelectedObj;
            this.result = this.defaultSelectedObj;
            let obj = {
                'result': this.result,
                'titles': this.defaultSelectedTitleObj,
                'isReset': true
            }
            this.$emit("confirm", obj);
            callback(this.result)
        },
        getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项
            let tempDefault = menuListItem.defaultSelectedIndex;
            if (!Array.isArray(tempDefault)) {
                tempDefault = [tempDefault];
            }
            // 获取所有项的下标 组成新的数组
            let all = [];
            for (let i = 0; i < menuListItem.detailList.length; i++) {
                all.push(i)
            }
            // 将默认选中的数组与所有项的数组的不同值合并为一个新数组
            var unDefaultSelectedIndex = tempDefault.filter(function (v) {
                return !(all.indexOf(v) > -1)
            }).concat(all.filter(function (v) {
                return !(tempDefault.indexOf(v) > -1)
            }));
            return unDefaultSelectedIndex;
        },
        resetMenuList(val) {
            this.menuList = val;
            this.$emit('update:menuList', val)
            // 强制更新当前选中的详细列表
            if (this.menuIndex >= 0 && this.menuIndex < this.menuList.length) {
                this.selectDetailList = this.menuList[this.menuIndex].detailList;
            }
            // 强制组件重新渲染
            this.$forceUpdate();
        },
        menuTabClick(index) {
            this.menuIndex = index;
            if(index==3 && uni.getStorageSync('provinceIndex')){
                let provinceIndex =uni.getStorageSync('provinceIndex')
                this.get_cityList(this.menuList[3].detailList[provinceIndex].value,provinceIndex)
                 this.menuList[3].detailList[provinceIndex].isSelected = true;
                uni.removeStorageSync('provinceIndex')
            }
            this.selectDetailList = this.menuList[index].detailList;
            this.selectedKey = this.menuList[index].key;
            // 如果是独立菜单
            if (this.independence && !this.menuList[index].isSort) {
                if (JSON.stringify(this.independenceObj) == '{}') {
                    this.initIndependenceObj(index);
                } else {
                    for (let key in this.independenceObj) {
                        if (key != this.selectedKey) {
                            this.initIndependenceObj(index);
                            this.resetSelected(this.menuList[index].detailList, this.selectedKey);
                        }
                    }
                }

            }
            if (this.independence && this.menuList[index].isSort) {

                this.independenceObj = {};


            }
            if (this.independence) {
                let idx = this.menuList[index].defaultSelectedIndex;
                if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值
                    if (this.menuList[index].isMutiple) {
                        for (let i = 0; i < idx.length; i++) {
                            if (this.menuList[index].detailList[idx[i]].isSelected == false) {
                                this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey);
                            }

                        }
                    } else {
                        if (this.menuList[index].detailList[idx].isSelected == false) {

                            this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey);

                        }
                    }

                }
            }


            // #ifdef H5
            this.selectedObj = this.selectedObj;
            this.$forceUpdate();
            // #endif
        },
        initIndependenceObj(index) {
            this.independenceObj = {};
            if (this.menuList[index].isMutiple) {
                this.independenceObj[this.selectedKey] = [];
            } else {
                this.independenceObj[this.selectedKey] = '';
            }
        },
        itemTapcityList(index, list, isMutiple, key) {
            this.cityListSelected = index
            this.result.address = list.code
            this.result.titles = list.name
            console.log(9999, index, list)
        },
        itemTap(index, list, isMutiple, key) {
            this.result.titles = ''
            this.cityList = []
            this.cityListSelected = 0
            if (isMutiple == true) {
                list[index].isSelected = !list[index].isSelected;
                if (index == 0) {
                    this.resetSelected(list, key)
                    if (!this.independence) {
                        this.selectedTitleObj[key] = list[index].title;
                    }
                } else {
                    list[0].isSelected = false
                    if (list[index].isSelected) {
                        if (this.independence) {
                            this.independenceObj[this.selectedKey].push(list[index].value);
                        } else {
                            this.selectedObj[key].push(list[index].value);
                        }
                    } else {
                        list[index].isSelected = false;
                        if (this.independence) {
                            var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value);
                            this.independenceObj[this.selectedKey].splice(idx, 1);
                        } else {
                            var idx = this.selectedObj[key].indexOf(list[index].value);
                            this.selectedObj[key].splice(idx, 1);
                        }

                    }
                    if (this.independence) {
                        this.result = this.independenceObj;
                    } else {
                        this.result = this.selectedObj;
                    }

                }
            } else {
                if (index == 0) {
                    this.resetSelected(list, key)
                    if (!this.independence) {
                        this.selectedTitleObj[key] = list[index].title;
                    }
                } else {
                    list[0].isSelected = false
                    if (this.independence) {
                        this.independenceObj[this.selectedKey] = list[index].value;
                        this.result = this.independenceObj;
                    } else {
                        this.selectedObj[key] = list[index].value;
                        this.result = this.selectedObj;
                        this.selectedTitleObj[key] = list[index].title;
                    }

                    for (let i = 0; i < list.length; i++) {
                        if (index == i) {
                            list[i].isSelected = true
                        } else {
                            list[i].isSelected = false
                        }
                    }
					if(list[0]&&list[0].dictType=='tree_province'){
						 this.get_cityList(list[index].value)
					}
                   
                }
            }
            // #ifdef H5
            this.$forceUpdate();
            // #endif
        },
        resetSelected(list, key) {
            if (typeof this.result[key] == 'object') {
                this.result[key] = [];
                this.selectedTitleObj[key] = list[0].title;
            } else {
                this.result[key] = '';
                this.selectedTitleObj[key] = list[0].title;
            }
            for (let i = 0; i < list.length; i++) {
                if (i == 0) {
                    list[i].isSelected = true;
                } else {
                    list[i].isSelected = false;
                }
            }
            // #ifdef H5
            this.$forceUpdate();
            // #endif
        },
        sortTap(index, list, key) {
            this.result.titles = ''
            if (this.independence) {
                this.independenceObj[this.selectedKey] = list[index].value;
                this.result = this.independenceObj;
            } else {
                this.selectedObj[key] = list[index].value;
                this.result = this.selectedObj;
                this.selectedTitleObj[key] = list[index].title;
            }

            for (let i = 0; i < list.length; i++) {
                if (index == i) {
                    list[i].isSelected = true;
                } else {
                    list[i].isSelected = false;
                }
            }
            let obj = {
                'result': this.result,
                'titles': this.selectedTitleObj,
                'isReset': false
            }
            this.$emit("confirm", obj);
        },
        sureClick() {
            if(this.result.titles != ''){
                this.selectedTitleObj.address = this.result.titles
            }
            let obj = {
                'result': this.result,
                'titles': this.selectedTitleObj,
                'isReset': false
            }

            console.log('nihao',obj)
            this.$emit("confirm", obj);
        },
        resetClick(list, key) {
          this.result.address = ''
          this.result.titles = ''
            this.resetSelected(list, key)
            this.cityList = []
            this.cityListSelected = 0
        }
    }
}
</script>

<style>
.filter-content {
    background-color: #F6F7F8;
}

.filter-content-title {
    border-bottom: #EEEEEE 1px solid;
    padding: 10px 15px;
    font-size: 13px;
    color: #999999;
}

.filter-content-detail {
    padding: 5px 15px;
}

.filter-content-detail-item-active {
    background-color: #D1372C;
    color: #FFFFFF;
    padding: 5px 15px;
    border-radius: 20px;
    margin-right: 10px;
    margin-top: 10px;
    display: inline-block;
    font-size: 14px;
}

.filter-content-detail-item-default {
    background-color: #FFFFFF;
    color: #666666;
    padding: 5px 15px;
    border-radius: 20px;
    margin-right: 10px;
    margin-top: 10px;
    display: inline-block;
    font-size: 14px;
}

.filter-content-detail-item-default-area {
    background-color: #f6f6f6;
    color: #666666;
    padding: 15px;
    margin-left: 10px;
    font-size: 14px;
    text-align: center;
}

.filter-content-detail-item-default-area-1 {
    background-color: #FFFFFF;
    color: #666666;
    padding: 15px;
    font-size: 14px;
    text-align: center;
}

.filter-content-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 45px;
    margin-top: 10px;
}

.filter-content-footer-item {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.filter-content-list {

    padding: 5px 15px;
}

.filter-content-list-item-default {
    color: #666666;
    width: 100%;
    padding: 10px 0px;
}

.filter-content-list-item-default text {
    width: 90%;
    font-size: 14px;
    display: inline-block;
}

.filter-content-list-item-active {
    color: #D1372C;
    width: 100%;
    padding: 10px 0px;
}

.filter-content-list-item-active text {
    font-size: 14px;
    width: 90%;
    display: inline-block;
}

.city-list {
    min-height: 400rpx;
    max-height: 800rpx;
}

.filter-content-list-item-active:after {
    content: '✓';
}

/* 字母导航样式 */
.letter-nav-container {
    padding: 15rpx 30rpx;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10rpx;
}

.letter-nav-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 600;
}

.letter-nav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15rpx;
}

.letter-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-weight: 600;
    background-color: #f8f9fa;
    color: #666;
    transition: all 0.3s ease;
    cursor: pointer;
}

.letter-nav-item:active {
    transform: scale(0.95);
}

.letter-nav-active {
    background-color: #25772f !important;
    color: #fff !important;
}
</style>
